"use client"

import { useRouter } from "next/navigation"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { TrendingUp, TrendingDown, Star } from "lucide-react"
import { useWatch } from "@/lib/hooks/use-watch"

// 股票数据类型定义
export interface AppStockRecommendation {
  code: string
  name: string
  change_percent: number
  volume: number
  prev_volume: number
  energy_value: number
  holding_days: number
  reason?: string
  strength?: number
  recommendationType?: "strong" | "weak" | "monitoring"  // 后端返回的推荐类型
}

interface StockCardProps {
  stock: AppStockRecommendation
  type: "strong" | "weak" | "monitoring"
  watchHook?: ReturnType<typeof useWatch>
  showHoldingDays?: boolean  // 是否显示持仓天数，默认为true
}

/**
 * 股票卡片组件
 * 用于显示股票的基本信息和交易数据
 */
export function StockCard({ stock, type, watchHook, showHoldingDays = true }: StockCardProps) {
  const router = useRouter()
  const isPositive = stock.change_percent > 0
  const changeColor = isPositive ? "text-success" : "text-destructive"
  
  // 在深色主题下显示背景色，浅色主题下不显示
  const bgColor = type === "strong" 
    ? "dark:bg-success/10" 
    : type === "weak" 
    ? "dark:bg-destructive/10" 
    : "dark:bg-accent/10"

  const isWatched = watchHook?.isWatched(stock.code) || false
  const isToggling = watchHook?.isToggling || false

  const handleWatchToggle = (e: React.MouseEvent) => {
    e.stopPropagation()
    watchHook?.toggle(stock.code)
  }

  const handleCardClick = () => {
    // 使用查询参数传递股票代码，兼容静态导出
    router.push(`/tracking?code=${stock.code}`)
  }

  // 根据类型获取标签信息
  const getStockLabel = () => {
    switch (type) {
      case "strong":
        return {
          text: "强势TOP30",
          className: "bg-success text-white",
          icon: "🔥"
        }
      case "weak":
        return {
          text: "弱势BOTTOM30",
          className: "bg-destructive text-white",
          icon: "❄️"
        }
      case "monitoring":
        return {
          text: "重点关注",
          className: "bg-accent text-accent-foreground",
          icon: "👁️"
        }
      default:
        return null
    }
  }

  const labelInfo = getStockLabel()

  return (
    <Card
      className={`cursor-pointer transition-all hover:shadow-lg hover:-translate-y-1 ${bgColor} ${type === "strong" ? "dark:border-l-4 dark:border-l-success" : type === "weak" ? "dark:border-l-4 dark:border-l-destructive" : "dark:border-l-4 dark:border-l-accent"}`}
      onClick={handleCardClick}
    >
      <CardContent className="p-4">
        {/* 标签徽章 */}
        {labelInfo && (
          <div className="flex justify-between items-center mb-3">
            <div className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${labelInfo.className}`}>
              <span className="mr-1">{labelInfo.icon}</span>
              {labelInfo.text}
            </div>
          </div>
        )}

        <div className="flex justify-between items-start mb-2">
          <div>
            <h3 className="font-semibold text-sm">{stock.name}</h3>
            <p className="text-xs text-muted-foreground">{stock.code}</p>
          </div>
          <div className="flex items-center space-x-2">
            <div className="text-right">
              <p className={`font-bold text-sm ${changeColor}`}>
                {isPositive ? "+" : ""}
                {stock.change_percent.toFixed(2)}%
              </p>
              {isPositive ? (
                <TrendingUp className="w-4 h-4 text-success ml-auto" />
              ) : (
                <TrendingDown className="w-4 h-4 text-destructive ml-auto" />
              )}
            </div>
            {watchHook && (
              <Button
                variant="ghost"
                size="sm"
                className="h-6 w-6 p-0"
                onClick={handleWatchToggle}
                disabled={isToggling}
              >
                <Star
                  className={`w-4 h-4 ${isWatched ? "fill-yellow-400 text-yellow-400" : "text-muted-foreground"
                    }`}
                />
              </Button>
            )}
          </div>
        </div>

        <div className="grid grid-cols-2 gap-2 text-xs">
          <div>
            <span className="text-muted-foreground">今日成交:</span>
            <p className="font-medium">{stock.volume.toFixed(2)}万</p>
          </div>
          <div>
            <span className="text-muted-foreground">昨日成交:</span>
            <p className="font-medium text-muted-foreground">
              {stock.prev_volume > 0 ? stock.prev_volume.toFixed(2) + '万' : '--'}
            </p>
          </div>
          <div>
            <span className="text-muted-foreground">成交量比:</span>
            <p className="font-medium">
              {stock.prev_volume > 0 ? (
                <span className={`${(stock.volume / stock.prev_volume) > 1 ? 'text-success' : 'text-destructive'}`}>
                  {((stock.volume / stock.prev_volume) * 100).toFixed(0)}%
                </span>
              ) : '--'}
            </p>
          </div>
          <div>
            <span className="text-muted-foreground">能量值:</span>
            <p className="font-medium">{stock.energy_value ? stock.energy_value.toFixed(2) : '--'}</p>
          </div>
          {showHoldingDays && (
            <div>
              <span className="text-muted-foreground">持仓天数:</span>
              <p className="font-medium">{stock.holding_days}天</p>
            </div>
          )}
          {stock.strength != null && (
            <div>
              <span className="text-muted-foreground">强度:</span>
              <p className="font-medium">{stock.strength.toFixed(2)}</p>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  )
}
